<template>
    <div class="el_container" :style="{ backgroundColor: colorConfig.backgroundColor}">
        <div class="el-header" style="padding:0px;">
            <div style="width: 100%;height: 100%;clear: both;">
                <div class="header_title">{{ titleStr }}</div>
                <div class="header_logo">
                    <img :src="logoUrl" class="icon" />
                    <div class="logo_title">
                        <div class="logo_title_0">{{ title }}</div>
                    </div>
                </div>
                <div class="header_date">
                    <div>{{ timeStr }}</div>
                    <div class="time">{{ dateStr }}</div>
                </div>
            </div>
        </div>
        <div class="el-main">
            <div class="el_main_content">
                <div class="left box" :style="{ backgroundColor: colorConfig.contentColor }">
                    <div class="left_title">
                        <div class="one">科室/诊室</div>
                        <div class="two">医生</div>
                        <div class="three">正在就诊</div>
                        <div class="four">准备就诊</div>
                    </div>
                    <div class="left_content">
                        <div v-for="(item,index) in allCurUsers" :key="index"
                            :style="{backgroundColor:getLeftBg(index)}">
                            <div class="one">{{item.showTitle}}</div>
                            <div class="two">{{item.doctorName}}</div>
                            <div class="three">{{item.curPatientName}}</div>
                            <div class="four">{{item.waitPatientName}}</div>
                        </div>
                    </div>
                </div>
                <div class="right box" :style="{ backgroundColor: colorConfig.contentColor }">
                    <div class="right_title">等候就诊</div>
                    <div class="right_content">
                        <div class="right_content_div" v-for="(item,index) in waitUsers" :key="index">
                            <div class="content_title">{{item.roomName}}</div>
                            <div class="div1">
                                <div :style="{backgroundColor:getRightBg(subIndex)}"
                                    v-for="(subItem,subIndex) in item.users" :key="subIndex">{{subItem}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="el-footer">
            <div class='ad'>
                <p class='content'>
                    <span>{{footerStr}} </span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: "",
            footerStr: "",
            logoUrl: "",
            titleStr: "",
            timeStr: "",
            dateStr: "",
            colorConfig: {
            },
            allCurUsers: [],
            waitUsers: [],
            showBgs: [],
        }
    },
    methods: {
        getRightBg(i) {
            if (this.showBgs.indexOf(i) > -1) {
                return "rgba(255, 255, 255, 0.2)";
            }
            return "rgba(255, 255, 255, 0.1)";
        },
        getLeftBg(i) {
            if (i % 2 == 0) {
                return "rgba(255, 255, 255, 0.2)";
            }
            return "rgba(255, 255, 255, 0.1)";
        },
    },
    mounted() {
        let left_table_content = document.getElementsByClassName('left_content')[0];
        let right_table_content = document.getElementsByClassName('right_content')[0];

        let arr = [];
        for (let i = 0; i < 100; i++) {
            arr.push(i);
            i++;
            arr.push(i);
            i += 2;
        }
        this.showBgs = arr;

        window.addEventListener("SOCKET_MESSAGE", (res) => {
            let value = res.detail;
            if (value.protocol == 2000) {//队列信息
                let dataArr = value.data;
                let allCurUsers = [];
                let allWaitPlayers = [];//{roomName:xxxx,users:[{xxx}]}

                for (let i = 0; i < dataArr.length; i++) {
                    let data = dataArr[i];
                    //没有在用户就不显示了
                    if (!data.currentUser && (!data.waitUsers || !data.waitUsers.length) && !data.readyUser) {
                        continue;
                    }
                    allCurUsers.push({ showTitle: data.roomName, doctorName: data.doctorName, curPatientName: data.currentUser, waitPatientName: data.readyUser });
                    if (!data.waitUsers || !data.waitUsers.length) {
                        continue;
                    }
                    if (data.waitUsers.length % 2 == 1) {//单一个,加一个进去
                        data.waitUsers.push("");
                    }
                    let mod = { roomName: data.roomName, users: data.waitUsers }
                    allWaitPlayers.push(mod);
                }
                window['allCurUsers'] = allCurUsers;
                window['allWaitPlayers'] = allWaitPlayers;
                setCurrTable();
                setWaitTable();
            }
        });

        let __this = this;
        function reset() {
            let d = __this.GLOBAL.device;
            if (!d) return;
            __this.colorConfig = __this.GLOBAL.colorConfig;
            console.error("TAG 颜色配置;", __this.colorConfig);
            __this.titleStr = d.showTitle ? d.showTitle : "综合显示屏";
            let baseConfig = d.basicConfig;
            if (!baseConfig) return;
            __this.title = baseConfig.title;
            __this.footerStr = baseConfig.tips;
            if (baseConfig.logoUrl) {
                __this.logoUrl = "http://" + __this.GLOBAL.BASE_URL + baseConfig.logoUrl + "?t=" + new Date().getTime();
            }
        }

        window.addEventListener("LOGIN_SUCCESS", (res) => {
            reset();
        });
        window.addEventListener("REFRESH", (res) => {

            this.GLOBAL.device=res.detail;
            reset();
        });

        //设置时间
        const setTime = () => {
            let { timeStr, dateStr } = getTimer();
            this.timeStr = timeStr;
            this.dateStr = dateStr;
        }

        function setCurrTable() {
            var vArr = window['allCurUsers'] ? window['allCurUsers'] : [];
            __this.allCurUsers = vArr;
        }

        function setWaitTable() {
            let arr = window['allWaitPlayers'] ? window['allWaitPlayers'] : {};// JSON.parse(JSON.stringify(data));
            __this.waitUsers = arr;
        }

        setTime();
        reset();

        setCurrTable();
        setWaitTable();

        let rightIndex = 0;
        //右边滑动
        function rightScroller() {
            let rightDiv = right_table_content;//.parentNode;
            if (rightDiv.scrollHeight > rightDiv.clientHeight) {
                if (rightDiv.scrollTop + rightDiv.clientHeight + 1 >= rightDiv.scrollHeight) {
                    rightIndex++;
                    if (rightIndex > 30) {
                        rightDiv.scrollTop = 0;
                        setTimeout(() => {
                            rightIndex = 0;
                        }, 3000);
                    }
                } else {
                    if (rightIndex == 0)
                        rightDiv.scrollTop += 2;
                }
            }
        }
        let leftIndex = 0;
        function leftScroller() {
            let leftDiv = left_table_content;//.parentNode;
            if (leftDiv.scrollHeight > leftDiv.clientHeight + 30) {
                if (leftDiv.scrollTop + leftDiv.clientHeight + 1 >= leftDiv.scrollHeight) {
                    leftIndex++;
                    if (leftIndex > 30) {
                        leftDiv.scrollTop = 0;
                        setTimeout(() => {
                            leftIndex = 0;
                        }, 3000);
                    }
                } else {
                    if (leftIndex == 0)
                        leftDiv.scrollTop += 2;
                }
            }
        }

        setInterval(() => {
            leftScroller();
            rightScroller();
            setTime();
        }, 100);
    }
}
function getTimer() {
    let date = new Date();
    let seconds = date.getSeconds();
    let hours = date.getHours();
    let minutes = date.getMinutes();

    const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
    let dateStr = date.toLocaleDateString(undefined, options);

    let time = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
    return { timeStr: time, dateStr: dateStr };// 
}

</script>

<style lang="scss">
.el_container {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.el-main {
    text-align: center;
    padding: 0px;
    margin: 0px;
    height: calc(100% - 120px);
    width: calc(100%);
    padding: 5px;
}

.el_main_content {
    width: 100%;
    height: 100%;
}

.el_main_content .left {
    width: calc(65% - 5px);
    height: 100%;
    float: left;
    margin-right: 5px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    justify-content: center;

}

.el_main_content .left .left_title {
    font-size: 2vw;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
    width: calc(100% - 10px);
    // flex: 1;
    height: 4vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.el_main_content .left .left_content {
    height: calc(100% - 52px);
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 1.4vw;
    overflow-x: hidden;
    overflow-y: auto;
    width: calc(100% - 10px);
    flex: 1;
}

.el_main_content .left .left_content>div {
    font-size: 1.5vw;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 4vw;
}

.one {
    flex: 3;
}

.two {
    flex: 2;
}

.three {
    flex: 4;
}

.four {
    flex: 4;
}


////////////////////////////////////// RIGHT //////////////////////
.el_main_content .right {
    width: calc(35% - 3px);
    height: 100%;
    float: left;
    margin-left: 3px;
    border-radius: 6px;
    font-weight: bold;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    justify-content: center;
}

.el_main_content .right .right_title {
    width: 100%;
    font-size: 2vw;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    height: 4vw;
    justify-content: center;
    align-items: center;
    display: flex;
}

.el_main_content .right .right_content {
    width: 100%;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

.right_content_div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

.content_title {
    height: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 2vw;
}

.div1 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5vw;
    height: auto;
    margin-bottom: 20px;
    flex: 1;
}

.div1>div {
    width: calc(50%);
    height: 32px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 1.5vw;
}


.el-header,
.el-footer {
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 25px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0px;
    padding: 0px;
}

.header_logo {
    font-size: 20px;
    width: 42%;
    height: 60px;
    line-height: 60px;
    float: left;
    margin-left: 5px;
}

.logo_title {
    float: left;
    height: 60px;
    line-height: 60px;
    text-align: left;
}

.logo_title_0 {
    font-size: 1.5vw;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
}

.logo_title_1 {
    font-size: 9px;
    height: 20px;
    line-height: 20px;
}

.header_logo .icon {
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin-top: 5px;
    text-align: right;
    vertical-align: middle;
    float: left;
}

.header_title {
    position: absolute;
    top: 0px;
    font-size: 3vw;
    font-weight: bold;
    width: calc(100%);
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding-right: 20px;
}

.header_date {
    font-size: 20px;
    width: calc(40%);
    height: 60px;
    line-height: 60px;
    float: right;
    text-align: right;
    margin-right: 5px;
}

.header_date div {
    height: 30px;
    line-height: 30px;
    padding-right: 5px;
    font-size: 30px;
    padding-top: 5px;
}

.header_date .time {
    font-size: 12px;
    height: 20px;
    padding-top: 0px;
}

.ad {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 3vw;
    overflow: hidden;
}

.ad .content {
    flex: 1;
    overflow: hidden;
}

.ad .content span {
    display: block;
    width: auto;
    display: block;
    width: auto;
    white-space: nowrap;
    animation: marquee 25s linear infinite;
    overflow: hidden;
    padding-left: 110%;
    padding-right: 110%;

    webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
</style>